import styled from 'styled-components'
import rankingBg from '@/assets/img/recommend-top-bg.png'
import sprite02 from '@/assets/img/sprite_02.png'
import spriteIcon from '@/assets/img/sprite_icon2.png'
import spriteCover from '@/assets/img/sprite_cover.png'

export const HotRankingWrapper = styled.div`
  font-size: 12px;
  color: #333;
  .table {
    width: 100%;
    height: 472px;
    margin-top: 20px;
    padding-left: 1px;

    background: url(${rankingBg}) no-repeat;

    display: flex;

    .blk {
      width: 33.333%;
      display: flex;
      flex-direction: column;

      .top {
        height: 100px;
        padding: 20px 0 0 19px;
        display: flex;
        .left {
          width: 80px;
          height: 80px;
          position: relative;

          img {
            width: 80px;
            height: 80px;
          }
          .cover_img {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url(${spriteCover}) no-repeat;
            background-position: -145px -57px;
            cursor: pointer;
          }
        }
        .right {
          flex: 1;
          margin: 6px 0 0 15px;
          .name {
            width: 100%;
            cursor: pointer;
            &:hover {
              text-decoration: underline;
            }
          }
          .icon_btns {
            .btn {
              border: none;
              background: url(${sprite02});
              width: 22px;
              height: 22px;
              cursor: pointer;
              margin: 10px 10px 0 0;
            }
            .play {
              background-position: -267px -205px;
              &:hover {
                background-position: -267px -235px;
              }
            }
            .favor {
              background-position: -300px -205px;
              &:hover {
                background-position: -300px -235px;
              }
            }
          }
        }
      }
      .list {
        flex: 1;
        ol {
          margin-left: 15px;
        }

        ol > li {
          height: 32px;
          line-height: 32px;

          display: flex;

          &:nth-child(-n + 3) {
            .num {
              color: #c10d0c;
            }
          }

          .num {
            width: 35px;
            height: 32px;
            text-align: center;
            line-height: 32px;
            font-size: 16px;
            font-weight: bold;
            color: #666;
          }
          .right-content {
            flex: 1;
            position: relative;
            width: 100%;

            .text {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              word-wrap: normal;
              width: 170px;
              height: inherit;
              cursor: pointer;
            }

            .operate {
              width: 82px;
              align-items: center;
              display: none;
              justify-content: space-around;
              position: absolute;
              right: 0;
              top: 0;
              bottom: 0;
              padding: 0 10px;

              .o-bg {
                width: 17px;
                height: 17px;
                background: url(${sprite02});
                cursor: pointer;
              }
              .o1 {
                background-position: -267px -268px;

                &:hover {
                  background-position: -267px -288px;
                }
              }
              .o2 {
                background: url(${spriteIcon});
                background-position: 0 -700px;
                margin: 5px 0 0 3px;
                &:hover {
                  background-position: -22px -700px;
                }
              }
              .o3 {
                background-position: -297px -268px;
                &:hover {
                  background-position: -297px -288px;
                }
              }
            }

            &:hover {
              .text {
                width: 96px;
                text-decoration: underline;
              }
              .operate {
                display: flex;
              }
            }
          }
        }
      }
      .more {
        clear: both;
        height: 32px;
        margin-right: 32px;
        text-align: right;
        line-height: 32px;
        cursor: pointer;
        a {
          color: inherit;
        }
      }
    }
  }
`
